<section>
  <h4>Click Outside to Close Dropdown Menu</h4>
  <div class="btn-group" dDropDown [closeScope]="'blank'" (toggleEvent)="onToggle($event)">
    <d-button bsStyle="primary" dDropDownToggle class="devui-dropdown-origin">
      Dropdown
      <span class="icon-chevron-down-2"></span>
    </d-button>
    <ul dDropDownMenu class="devui-dropdown-menu devui-scrollbar" role="menu">
      <li role="menuitem">
        <input type="text" class="devui-input devui-input devui-search-in-dropdown" placeholder="input box" />
        <div class="icon-in-search">
          <i class="icon icon-search"></i>
        </div>
      </li>
      <li class="disabled" role="menuitem">
        <a dDropDownMenuItem class="disabled">Item 1</a>
      </li>
      <li role="menuitem">
        <a dDropDownMenuItem>Item 2</a>
      </li>
      <li role="menuitem">
        <a dDropDownMenuItem>Item 3</a>
      </li>
    </ul>
  </div>
</section>
<section>
  <h4>Custom Control of Closing</h4>
  <p>Click last menu item to close dropdown menu.</p>
  <div class="btn-group" dDropDown [closeScope]="'none'" (toggleEvent)="onToggle($event)" #myDropdown="d-dropdown">
    <d-button bsStyle="common" dDropDownToggle class="devui-dropdown-origin">
      Dropdown
      <span class="icon-chevron-down-2"></span>
    </d-button>
    <ul dDropDownMenu class="devui-dropdown-menu devui-scrollbar" role="menu">
      <li role="menuitem">
        <input type="text" class="devui-input devui-input devui-search-in-dropdown" placeholder="input box" />
        <div class="icon-in-search">
          <i class="icon icon-search"></i>
        </div>
      </li>
      <li class="disabled" role="menuitem">
        <a dDropDownMenuItem class="disabled">Item 1 (Disabled)</a>
      </li>
      <li role="menuitem">
        <a dDropDownMenuItem>Item 2</a>
      </li>
      <li role="menuitem" (click)="myDropdown.toggle()">
        <a dDropDownMenuItem>Close</a>
      </li>
    </ul>
  </div>
</section>
